<template>
	<view class="Webmaster">
		<view class="list">
			<view class="item">
				<view class="lable dis p20" @click="FoldFun1">
					<view class="lableL">区域站长</view>
					<view class="lableR">
						<up-icon name="arrow-down" v-if="isFold1"></up-icon>
						<up-icon name="arrow-up" v-else></up-icon>
					</view>
				</view>
				<view class="value p20" :class="isFold1 ? 'disn' : ''">
					<view class="add dis" v-if="data1.avatar">
						<image :src="data1.avatar" mode="aspectFill"></image>
						<view class="offImg" @click.stop="delImg(data1)">x</view>
					</view>
					<view class="add dis" @click="open('regional_stationmaster')" v-else>+</view>
					<view class="valueT" v-if="data1.nickname">{{ data1.nickname }}</view>
				</view>
			</view>
			<view class="item">
				<view class="lable dis p20" @click="FoldFun2">
					<view class="lableL">副区域站长</view>
					<view class="lableR">
						<up-icon name="arrow-down" v-if="isFold2"></up-icon>
						<up-icon name="arrow-up" v-else></up-icon>
					</view>
				</view>
				<view class="value p20" :class="isFold2 ? 'disn' : ''">
					<view class="add dis" v-if="data2.avatar">
						<image :src="data2.avatar" mode="aspectFill"></image>
						<view class="offImg" @click.stop="delImg(data2)">x</view>
					</view>
					<view class="add dis" @click="open('deputy_regional_stationmaster')" v-else>+</view>
					<view class="valueT" v-if="data2.nickname">{{ data2.nickname }}</view>
				</view>
			</view>
			<view class="item">
				<view class="lable dis p20" @click="FoldFun3">
					<view class="lableL">站长</view>
					<view class="lableR">
						<up-icon name="arrow-down" v-if="isFold3"></up-icon>
						<up-icon name="arrow-up" v-else></up-icon>
					</view>
				</view>
				<view class="value p20" :class="isFold3 ? 'disn' : ''">
					<view class="add dis" v-if="data3.avatar">
						<image :src="data3.avatar" mode="aspectFill"></image>
						<view class="offImg" @click.stop="delImg(data3)">x</view>
					</view>
					<view class="add dis" @click="open('stationmaster')" v-else>+</view>
					<view class="valueT" v-if="data3.nickname">{{ data3.nickname }}</view>
				</view>
			</view>
			<view class="item">
				<view class="lable dis p20" @click="FoldFun4">
					<view class="lableL">站长助理</view>
					<view class="lableR">
						<up-icon name="arrow-down" v-if="isFold4"></up-icon>
						<up-icon name="arrow-up" v-else></up-icon>
					</view>
				</view>
				<view class="value p20" :class="isFold4 ? 'disn' : ''">
					<view class="add dis" v-if="data4.avatar">
						<image :src="data4.avatar" mode="aspectFill"></image>
						<view class="offImg" @click.stop="delImg(data4)">x</view>
					</view>
					<view class="add dis" @click="open('stationmaster_assistant')" v-else>+</view>
					<view class="valueT" v-if="data4.nickname">{{ data4.nickname }}</view>
				</view>
			</view>
		</view>
	</view>
	<up-popup :show="show" closeOnClickOverlay mode="right" @close="offPop">
		<view class="userAdmin">
			<view class="search p20 dis">
				<view class="inputU">请选择用户</view>
				<view class="userBut closeBut" @click="offPop">
					<up-icon name="close"></up-icon>
				</view>
			</view>
			<view class="search p20 dis">
				<view class="inputU">
					<up-input v-model="nickname" placeholder="请输入关键词" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399"></up-input>
				</view>
				<view class="userBut" @click="searchFun">搜索</view>
			</view>
			<view class="userList" v-if="memberList.length > 0">
				<scroll-view scroll-y class="scroll_container">
					<view class="userItem p20 dis" v-for="item in memberList" :key="item.id" @click="editUser(item)">
						<view class="userImg">
							<image v-if="item.avatar" :src="item.avatar" mode="aspectFill"></image>
							<image v-else src="/post/static/default_avatar.jpg" mode="aspectFill"></image>
						</view>
						<view class="userInfo dis">
							<view class="name">{{ item.nickname }}</view>
							<view class="school">{{ item.departmentName }}</view>
						</view>
					</view>
					<view class="noData">没有更多了</view>
				</scroll-view>
			</view>
			<view class="noData" v-else>暂无数据</view>
		</view>
	</up-popup>
</template>

<script setup>
import { getStationmasterList, getMember, chooseUser, deleteStationmaster } from '@/config/api.js';
import { ref } from 'vue';
import { onShow, onLoad, onReachBottom } from '@dcloudio/uni-app';
const schoolId = ref(0);
onLoad((options) => {
	schoolId.value = options.schoolId;
	getData();
});
onShow(() => {});

// 新增
const show = ref(false);
const roleType = ref('');
const open = (str) => {
	roleType.value = str;
	getMemberList();
	show.value = true;
};
const nickname = ref('');
const pageNum = ref(1);
const pageSize = ref(900);
const total = ref(0);
const memberList = ref([]);
const getMemberList = async () => {
	const data = {
		pageNum: pageNum.value,
		pageSize: pageSize.value,
		nickname: nickname.value
	};
	const res = await getMember(data);
	// console.log(res);
	if (res.code == 0) {
		total.value = res.data.pageInfo.total;
		show.value = true;
		memberList.value = res.data.pageInfo.list;
	}
};
const searchFun = () => {
	pageNum.value = 1;
	memberList.value = [];
	getMemberList();
};
const offPop = () => {
	show.value = false;
	roleType.value = '';
};
const editUser = async (item) => {
	const data = {
		roleType: roleType.value,
		userId: item.id
	};
	const res = await chooseUser(schoolId.value, data);
	if (res.code == 0) {
		getData();
		offPop();
	}
	uni.showToast({
		title: res.message,
		icon: 'none'
	});
};

const data1 = ref({});
const data2 = ref({});
const data3 = ref({});
const data4 = ref({});
const getData = async () => {
	const res = await getStationmasterList(2);
	// console.log(res);
	if (res.code == 0) {
		data1.value = {};
		data1.value = {};
		data1.value = {};
		data1.value = {};
		res.data.list.forEach((item) => {
			if (item.roleType == 'regional_stationmaster') {
				data1.value = item;
			} else if (item.roleType == 'deputy_regional_stationmaster') {
				data2.value = item;
			} else if (item.roleType == 'stationmaster') {
				data3.value = item;
			} else if (item.roleType == 'stationmaster_assistant') {
				data4.value = item;
			}
		});
	}
};

const delImg = async (item) => {
	// console.log(item);
	const res = await deleteStationmaster(item.id, {});
	if (res.code == 0) {
		getData();
	}
	uni.showToast({
		title: res.message,
		icon: 'none'
	});
};

// 是否折叠
const isFold1 = ref(false);
const FoldFun1 = () => {
	isFold1.value = !isFold1.value;
};
const isFold2 = ref(false);
const FoldFun2 = () => {
	isFold2.value = !isFold2.value;
};
const isFold3 = ref(false);
const FoldFun3 = () => {
	isFold3.value = !isFold3.value;
};
const isFold4 = ref(false);
const FoldFun4 = () => {
	isFold4.value = !isFold4.value;
};
</script>

<style scoped lang="scss">
.Webmaster {
	width: 100%;
	.list {
		width: 100%;
		.item {
			width: 100%;
			.lable {
				justify-content: space-between;
				align-items: center;
				width: 100%;
				border: 2rpx solid #edeef1;
				line-height: 75rpx;
			}
			.value {
				height: 280rpx;
				overflow: hidden;
				transition: height 0.3s ease;
				.add {
					position: relative;
					justify-content: center;
					align-items: center;
					width: 170rpx;
					height: 170rpx;
					border-radius: 15rpx;
					background-color: #f7f8fa;
					overflow: hidden;
					.offImg {
						position: absolute;
						right: 0;
						top: 0;
						width: 40rpx;
						height: 40rpx;
						line-height: 30rpx;
						font-size: 26rpx;
						text-align: center;
						border-radius: 0rpx 10rpx 0rpx 40rpx;
						background: #000;
						color: #fff;
					}
				}
				.valueT {
					padding-left: 10rpx;
					line-height: 75rpx;
					font-size: 26rpx;
				}
			}
		}
	}
}
.userAdmin {
	.search {
		align-items: center;
		margin-bottom: 20rpx;
		background-color: #fff;
		.inputU {
			flex: 1;
		}
		.userBut {
			width: 120rpx;
			text-align: center;
		}
		.closeBut {
			width: 70rpx !important;
		}
	}
	.userList {
		width: 100%;
		height: 83vh;
		background-color: #f7f7f7;
		overflow: hidden;
		.scroll_container {
			height: 100%;
		}
		.userItem {
			margin-bottom: 20rpx;
			width: 100%;
			background-color: #fff;
			.userImg {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				overflow: hidden;
				background-color: #f7f7f7;
			}
			.userInfo {
				flex-direction: column;
				justify-content: space-between;
				padding: 5rpx 20rpx;
				.name {
					font-size: 28rpx;
					font-weight: 700;
					color: #676767;
				}
				.school {
					font-size: 26rpx;
					color: #888;
				}
			}
		}
	}
	.noData {
		width: 100%;
		color: #999;
		text-align: center;
	}
}
</style>
<style>
page {
	background-color: #fff;
}
image {
	width: 100%;
	height: 100%;
}
.disn {
	height: 0rpx !important;
	padding: 0rpx !important;
}
.u-swipe-action-item__right__button__wrapper {
	background-color: #e63f31 !important;
}
.card {
	margin-bottom: 20rpx;
	background-color: #fff;
	border-radius: 15rpx;
}
</style>
